<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>毕业招聘系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 轮播图样式 */
        .carousel-container {
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
            margin-bottom: 40px;
            border-radius: 12px;
        }
        .carousel-slide {
            position: absolute;
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 36px;
            background-size: cover;
            background-position: center;
        }
        .carousel-prev, .carousel-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0,0,0,0.3);
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            font-size: 20px;
            z-index: 10;
        }
        .carousel-prev { left: 10px; }
        .carousel-next { right: 10px; }
        .carousel-indicators {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }
        .carousel-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.5);
            cursor: pointer;
        }
        .carousel-indicator.active { background-color: white; }

        /* 推荐Banner样式 */
        .banner-section {
            display: flex;
            gap: 20px;
            margin-bottom: 40px;
        }
        .banner-item {
            flex: 1;
            height: 180px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .banner-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .banner-text {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 15px;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            color: white;
        }

        /* 身份选择卡片样式 */
        .role-cards {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
            margin: 40px 0;
        }
        .role-card {
            width: 300px;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
            padding: 30px;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .role-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 12px 32px rgba(0,0,0,0.12);
        }
        .role-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 36px;
            color: white;
        }
        .company-icon { background-color: #36D399; }
        .seeker-icon { background-color: #3A86FF; }
        .admin-icon { background-color: #FF9F1C; }
        .role-card h2 { font-size: 22px; margin-bottom: 15px; color: #333; }
        .role-card p { color: #666; line-height: 1.6; margin-bottom: 25px; }
        .btn-group { display: flex; gap: 10px; }
        .role-btn {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .login-btn { background-color: #f0f2f5; color: #333; }
        .login-btn:hover { background-color: #e5e7eb; }
        .register-btn { background-color: var(--primary); color: white; }
        .register-btn:hover { background-color: var(--secondary); }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .carousel-container { height: 250px; }
            .banner-section { flex-direction: column; }
            .banner-item { height: 150px; }
            .role-cards { flex-direction: column; align-items: center; }
            .role-card { width: 80%; }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="navbar">
        <div class="nav-container">
            <div class="logo">毕业招聘系统</div>
            <div class="nav-links">
                <a href="index.html" class="nav-btn active">首页</a>
                <a href="info-query.html" class="nav-btn">信息查询</a>
            </div>
        </div>
    </div>

    <div class="container">
        <!-- 轮播图区域 -->
        <div class="carousel-container" id="mainCarousel">
            <div class="carousel-slide" style="background-image: url('images/0772.jpg_wh860.jpg')">
                <div>2023届毕业生春季招聘会</div>
            </div>
            <div class="carousel-slide" style="background-image: url('images/3244.jpg_wh860.jpg')">
                <div>名企校招专场</div>
            </div>
            <div class="carousel-slide" style="background-image: url('images/8109.jpg_wh860.jpg')">
                <div>毕业生就业指导讲座</div>
            </div>
            <button class="carousel-prev" onclick="prevSlide()"><i class="fas fa-chevron-left"></i></button>
            <button class="carousel-next" onclick="nextSlide()"><i class="fas fa-chevron-right"></i></button>
            <div class="carousel-indicators">
                <div class="carousel-indicator active" onclick="goToSlide(0)"></div>
                <div class="carousel-indicator" onclick="goToSlide(1)"></div>
                <div class="carousel-indicator" onclick="goToSlide(2)"></div>
            </div>
        </div>

        <!-- 推荐Banner区域 -->
        <div class="banner-section">
            <div class="banner-item">
                <img src="images/435.jpg!list1x.v2" alt="实习推荐">
                <div class="banner-text">
                    <h3>实习岗位推荐</h3>
                    <p>积累工作经验，提升就业竞争力</p>
                </div>
            </div>
            <div class="banner-item">
                <img src="images/6b0633e43421f2ce6b232df6fb0ea523.jpg" alt="毕业生专享">
                <div class="banner-text">
                    <h3>毕业生专享通道</h3>
                    <p>优质企业定向招聘</p>
                </div>
            </div>
        </div>

        <!-- 身份选择区域 -->
        <div class="role-cards">
            <!-- 企业招聘者卡片 -->
            <div class="role-card">
                <div class="role-icon company-icon">
                    <i class="fas fa-building"></i>
                </div>
                <h2>企业招聘</h2>
                <p>发布招聘信息，筛选简历，联系求职者，管理招聘流程</p>
                <div class="btn-group">
                    <button class="role-btn login-btn" onclick="window.location.href='company-login.html'">登录</button>
                    <button class="role-btn register-btn" onclick="window.location.href='register.html?role=company'">注册</button>
                </div>
            </div>

            <!-- 应聘者卡片 -->
            <div class="role-card">
                <div class="role-icon seeker-icon">
                    <i class="fas fa-user-graduate"></i>
                </div>
                <h2>求职者</h2>
                <p>搜索职位，投递简历，查看反馈，管理求职状态</p>
                <div class="btn-group">
                    <button class="role-btn login-btn" onclick="window.location.href='job-seeker-login.html'">登录</button>
                    <button class="role-btn register-btn" onclick="window.location.href='register.html?role=seeker'">注册</button>
                </div>
            </div>

            <!-- 管理员卡片 -->
            <div class="role-card">
                <div class="role-icon admin-icon" onclick="window.location.href='admin-dashboard.html'">
                    <i class="fas fa-user-shield"></i>
                </div>
                <h2>管理员</h2>
                <p>管理用户信息，维护系统管理，审核企业资质，处理投诉</p>
            </div>
        </div>
    </div>

    <script>
        // 轮播图功能实现
        let currentSlide = 0;
        const slides = document.querySelectorAll('.carousel-slide');
        const indicators = document.querySelectorAll('.carousel-indicator');
        const totalSlides = slides.length;

        function showSlide(index) {
            // 隐藏所有幻灯片
            slides.forEach(slide => {
                slide.style.transform = 'translateX(100%)';
            });

            // 重置所有指示器
            indicators.forEach(indicator => {
                indicator.classList.remove('active');
            });

            // 显示当前幻灯片
            slides[index].style.transform = 'translateX(0)';
            indicators[index].classList.add('active');
            currentSlide = index;
        }

        function nextSlide() {
            const nextIndex = (currentSlide + 1) % totalSlides;
            showSlide(nextIndex);
        }

        function prevSlide() {
            const prevIndex = (currentSlide - 1 + totalSlides) % totalSlides;
            showSlide(prevIndex);
        }

        function goToSlide(index) {
            showSlide(index);
        }

        // 自动轮播
        setInterval(nextSlide, 5000);
    </script>
</body>
</html>